<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
   
  </head>
  	<script type="text/javascript" src="{root}/Slider/js/jquery-1.4.1.min.js"></script>
	<link href="{root}/Slider/css/silder.css" type="text/css" rel="stylesheet" />
	<script src="{root}/Slider/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="{root}/Slider/js/jQuery-easing.js" type="text/javascript"></script>
    <script src="{root}/Slider/js/jQuery-jcSlider.js" type="text/javascript"></script>
  
  <body>
  
  <div class="main-content">
        <div id="pic_wrap" style="display: none">
            <ul id="imgShow">
                <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="{root}/Slider/img/1.jpg" width="573" height="300" />
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Chrysanthemum
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="{root}/Slider/img/2.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Desert
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="{root}/Slider/img/3.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Hydrangeas
                        </div>
                    </div>
                </li>
                 <li>
                    <div class="middle-out">
                        <div class="middle-in">
                            <img src="{root}/Slider/img/11.jpg" width="573" height="300"/>
                        </div>
                        <div align="center" style="margin-top: 5px; padding-top: 5px;">
                            Jellyfish
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    <script type="text/javascript">
        $(function () {
            $('#pic_wrap').jcSlider({
                loading: false,                 //预加载loading开关设置，提供true,false
                loadpic: '../Slider/img/loading.gif',     //预加载loading图片路径，相对定位,如../img/riddick.png
                play: true,                     //是否开起自动播放功能，提供true,false
                play_speed: 2000,               //自动播放速度设置，提供easing值 或 数值(mm)
                slider_btn: true,               //左右按钮开关，提供true,false
                slider_speed: 500,              //图片切换速度设置，提供easing值 或 数值(mm)
                slider_num: true,               //数字按钮开关，提供true,false
                offset: 0,                      //设置左右按钮偏移量(px)
                btn_event: 'mouseover',             //数字按钮事件设置，提供click,mouseover等
                btn_position: 'middle',         //数字按钮位置，提供left,middle,right
                num_offsetW: 0,                 //设置数字按钮的X偏移(px)
                num_offsetH: 400,               //设置数字按钮的Y偏移(px)
                scaling: false,                  //是否设置图片大小，提供true,false
                width: 956,                     //设置图片宽度单位(px)
                height: 300,                    //设置图片高度单位(px)        
                sliderModle: 'xScroll'
            });
            var tagli = $("#imgShow li");
            if (tagli.length > 0) {
                $('#pic_wrap').css('display', 'block');
            }
            var _w1 = $('#pic_wrap').width();
            var _w2 = $('#sliderNum').width();
            $('#sliderNum').css('left', (_w1 - _w2) / 2);
        });
    </script>
    
  </body>
</html>
